<template>
  <fieldset>
    <legend>tab切换</legend>
    <button ref="btn"  @click="handle($refs.btn.innerText)" :class="[{'active':$refs.btn===name}]"  >homeCom</button>
    <button ref="btn2" @click="handle($refs.btn2.innerText)" :class="[{'active':$refs.btn2===name}]" >emailCom</button>
    <button ref="btn3" @click="handle($refs.btn3.innerText)" :class="[{'active':$refs.btn3===name}]"  >mineCom</button>
    <div :is="name"></div>
  </fieldset>
</template>

<script>
// 1引入
import emailCom from "./email.vue";
import homeCom from "./home.vue";
import mineCom from "./mine.vue";

export default {
  // 2注册
  components: {
    emailCom,
    homeCom,
    mineCom,
  },
  data() {
    return {
        
      name: 'emailCom',
      
    };
  },
  methods: {
    handle(p) {
      this.name = p;
      console.log(p);
      
console.log(this.$refs.btn3,"lllll");
console.log(this.$refs.btn2,"lllll");
console.log(this.$refs.btn,"lllll");
    },
    

  },
};
</script>

<style>
.active{
    background:hotpink;
}

</style>





















